<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>菜品详情</title>
    <link rel="shortcut icon" href="favicon.ico">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../../styles/common.css" />
    <!--    头像文件上传样式-->
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>
    <style>
        .box1{
            position: absolute;
            width: 100%;
            height: 180px;
            background-color: black;
            opacity:0.4;
            margin-top: -1010px;
        }
        .box2{
            position: absolute;
            width: 100%;
            height: 180px;
            margin-top: -130px;
            margin-left: 200px;
        }
        .line1{
            width: 100%;
            height: 2px;
            background-color: white;
            margin-top: -830px;
        }
        .box2:nth-child(n) h2{
            color: white;
        }
        h2:nth-child(2){
            margin: -70px 0 0 300px;
        }
        h2:nth-child(3){
            margin: -31px 0 0 400px;
        }
        h2:nth-child(4){
            margin: -32px 0 0 500px;
        }
        h2:nth-child(5){
            margin: -32px 0 0 630px;
        }
        h2:nth-child(6){
            margin: -32px 0 0 740px;
        }
        h2:nth-child(7){
            margin: -32px 0 0 860px;
        }

        .box3{
            position: absolute;
            width: 500px;
            height: 450px;
            /*background-color: red;*/
            margin: 100px 510px 0;
        }
        .box3  h1:nth-child(1){
            color: white;
            text-align: center;
            font-family: 'beyond_the_mountainsregular', sans-serif;
        }
        .box3  h1:nth-child(2){
            color: white;
            font-size: 80px;
            text-align: center;
        }
        .box3  button:nth-child(3){
            width: 250px;
            height: 60px;
            font-size: 20px;
            background-color: white;
            border-radius: 100px;
            margin: 10px 24% 0;
            transition:all 0.4s;

        }
        .box3  button:nth-child(3):hover{
            background-color: red;
            color: white;
        }


    </style>

</head>

<body>
<div class="app" id="app" style="position: relative">

    <!--背景图大蒙板-->
    <div style=" background: #000;">
        <img style="opacity:0.6; filter: alpha(opacity=60); width: 100%;height: 1000px" src="../../images/qiantai/test-bg.png"/>
    </div>

    <!--导航栏小蒙板-->
    <div class="box1" style="">
    </div>
    <!--白色分割线-->
    <div class="line1" style="">
    </div>

    <!--导航栏-->

    <div class="box2">
        <img src="../../images/qiantai/logo.png"/>
        <h2><a href="index.html">主页</a></h2>
        <h2><a href="menu.html">菜单</a></h2>
        <h2><a href="shopping_car.html">购物车</a></h2>
        <h2><a href="tables.html">餐桌</a></h2>
        <h2><a href="news.html">新闻</a></h2>
        <div style="width: 150px;height: 70px;margin: -45px 0px 0px 900px;text-align:center;line-height:70px;background-color: #1AD85E;font-size:25px;">
            <a href="login_user.html" style="color: white">SIN IN</a>
        </div>
        <el-button  @click="information()" style="width: 150px;height: 70px;background-color:#1AD85E;position: absolute;margin:-70px 0px 0px 1100px;border: none;font-size:25px;color: whitesmoke" type="primary" >
            个人信息
        </el-button>
    </div>

    <!-- 内容详情-->
    <div style="background-image:url(../../images/qiantai/test-bg.png)">
        <!--图片-->
        <div>
            <img style="width: 500px;height: 300px;margin: 50px 0 0 150px;position:absolute;" :src="imageUrl"/>


            <!--图片组-->
            <div style="margin: 370px 0 0 150px;position:absolute;">
                <ul class="el-upload-list el-upload-list--picture-card">
                    <li class="el-upload-list__item is-success" v-for="fit in fileList" :key="fit.name">
                        <img style="width: 100px;height: 100px;"
                             :src="fit.url" @click="handlePictureCardPreview(fit)"/>
                    </li>
                </ul>

                <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
            </div>
        </div>

        <!--信息-->
        <div style="width: 700px;height: 500px;background-color: red;margin: 50px 0 0 700px;position:absolute;">
            <h1 style="color: white;margin: 0 0 0 50px">{{formInfo.name}}</h1>
            <h2 style="color: white;margin:50px 0 20px 50px">￥{{formInfo.price}}</h2>
            <div style="background-color: white;width: 700px;height: 5px"></div>
            <div style="color: snow;width: 600px;height: 200px;overflow: auto;margin: 20px 0 0 50px">这个是描述这个是描述这个是描述这个是描述这个是描述这个是描述这个是描述这个是描述这个是描述
                {{formInfo.description}}
            </div>
            <el-button @click="goShop()" type="success" style="margin: 70px 0 0 500px;position:absolute;">添加购物车</el-button>
        </div>

    </div>


    <!--加入购物车填写信息弹框-->
    <el-dialog title="信息填写" style="height: 750px"  :visible.sync="dialogInfo">
        <el-form :model="formData_ShoppingCart" :rules="rules" ref="formData_ShoppingCart" label-width="100px" class="demo-formData_ShoppingCart">
            <el-form-item  label="数量：" prop="username">
                <template>
                    <el-input-number v-model="formData_ShoppingCart.number" :min="1" :max="10" label="数量"></el-input-number>
                </template>
            </el-form-item>

            <el-form-item  label="管理员姓名：" prop="remark">
<!--                <el-input v-model="formData_ShoppingCart.remark"></el-input>-->
                <el-input
                        type="textarea"
                        :rows="5"
                        placeholder="请输入备注"
                        v-model="formData_ShoppingCart.remark">
                </el-input>
            </el-form-item>

            <el-form-item>
                <el-button @click="addShoppingCar" type="primary" @click="submitForm">确认</el-button>
                <el-button @click="center">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>


    <!--个人信息模块(侧边栏)-->
    <el-drawer
            style="width: 1400px;height: 780px;margin:-176px 0px 0px 0px;position: fixed"
            title="个人信息"
            :visible.sync="drawer"
            direction="ltr"
            :before-close="handleClose">

        <!--分割线-->
        <div style="width: 100%;height: 2px;background-color: black"></div>
        <!--1.账号未登录的内容-->
        <div  v-show="logout" >
            <h1>账号未登录</h1>
        </div>

        <!--2.账号登录的内容-->
        <div  v-show="login" style="background-color: #aaaaaa">
            <!--个人基本信息-->
            <div style="margin-top: 40px;">
                <!--              <img style="margin:10px 0 0 30px;border-radius: 100%" :src=`/photos/download?name=${userInfo.data.image}`></img>-->
                <el-image
                        style="width: 100px; height: 100px;margin:40px 0 0 30px;"
                        :src=`/photos/download?name=${userInfo.data.avatar}`
                ></el-image>
                <div style="margin: -80px 0 50px 200px; width: 301px;">
                    <span style="margin-bottom: 10px">姓名：{{userInfo.data.name}}</span><br><br>
                    <span style="margin-bottom: 10px">性别：{{userInfo.data.sex}}</span><br><br>
<!--                    <span style="margin-bottom: 10px">省份证号：{{userInfo.data.idNumber}}</span><br><br>-->

                </div>
            </div>

            <!--个人功能模块-->
            <el-collapse  v-model="activeName" @change="handleChange" accordion>

                <el-collapse-item title="修改个人信息" name="1">
                </el-collapse-item>

                <el-collapse-item title="我的订单" name="2">
                </el-collapse-item>

                <el-collapse-item title="我的预定" name="4">
                    <div v-if="myScheduleTableFrom!==null" style="width: 100%;height: 150px;background-color: #b3e19d">
                        <p>餐桌名：{{myScheduleTableFrom.name}}</p>
                        <p>开始时间：{{myScheduleTableFrom.startscheduleTime}}</p>
                        <p>结束时间：{{myScheduleTableFrom.endscheduleTime}}</p>
                        <el-button @click="centerSchedule()" type="danger" plain  style="margin:0px 0 0 300px">取消预定</el-button>
                    </div>
                    <div v-else-if="myScheduleTableFrom==null">
                        <h1>您还没预定任何餐桌！</h1>
                    </div>
                </el-collapse-item>

                <el-collapse-item title="安全退出" name="5">
                    <div style="color: red">注意：退出登录后不能对菜品信息和餐桌预定等功能进行操作</div>
                    <!--                  <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>-->
                    <el-button @click="logoutInformation()" type="danger" plain  style="margin:20px 0 0 300px">退出登录</el-button>
                </el-collapse-item>
            </el-collapse>
        </div>
    </el-drawer>

    <!--个人订单信息弹框-->
    <el-dialog title="个人订单" style="height: 750px;"  :visible.sync="myOrder">
        <div style="overflow: auto" v-for="option1 in options1">
            <div  style="width: 570px;height: 100%;background-color: #b3e19d;margin-bottom: 20px">
                <table border="1" cellspacing="0" style="text-align:center;width: 100%;height: 50px;background-color: red">
                    <th>菜名</th><th>图片</th><th>数量</th><th>单价</th>
                    <tr style="font-size: 15px" v-for="option2 in option1.orderDetailList">
                        <td>{{option2.name}}</td>
                        <td>
                            <el-image
                                    style="width: 100px; height: 100px"
                                    :src=`/photos/download?name=${option2.image}`
                            ></el-image>
                        </td>
                        <td>{{option2.number}}</td>
                        <td>{{option2.price}}</td>
                    </tr>
                </table>

                <div>
                    <p style="margin: 0 0 0 0px;">下单时间：{{option1.payTime}}</p>
                    <p style="margin: -20px 0 0 300px;">订单号：{{option1.orderId}}</p>
                    <p>下单时间：{{option1.payTime}}</p>
                    <p style="margin: -30px 0 0 300px;">总消费：{{option1.amount}}元</p>
                </div>
            </div>
        </div>
    </el-dialog>

    <!--修改个人信息-->
    <el-dialog title="修改个人信息" style="height: 750px"  :visible.sync="updateInformation">
        <el-form :model="formData_user" :rules="rules" ref="formData_user" label-width="100px" class="demo-formData_user">
            <el-form-item  label="账号：" prop="username">
                <el-input v-model="formData_user.username"></el-input>
            </el-form-item>

            <el-form-item  label="用户名：" prop="name">
                <el-input v-model="formData_user.name"></el-input>
            </el-form-item>

            <el-form-item  label="头像：" prop="avatar">
                <el-upload class="avatar-uploader"
                           action="/photos/upload"
                           :show-file-list="false"
                           :on-success="handleAvatarSuccess"
                           :before-upload="beforeUpload"
                           ref="upload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>

            <el-form-item  label="手机号：" prop="phone">
                <el-input v-model="formData_user.phone"></el-input>
            </el-form-item>

            <el-form-item  label="性别：" prop="sex">
                <el-radio-group v-model="formData_user.sex">
                    <el-radio label="男"></el-radio>
                    <el-radio label="女"></el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item  label="省份证号：" prop="idNumber">
                <el-input v-model="formData_user.idNumber"></el-input>
            </el-form-item>


            <el-form-item>
                <el-button type="primary" @click="submitForm()">修改</el-button>
<!--                <el-button @click="center">取消</el-button>-->
                <!--                <el-button @click="resetForm('formData_user')">全部重置</el-button>-->
            </el-form-item>
        </el-form>
    </el-dialog>

</div>


<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../../plugins/axios/axios.min.js"></script>


<script>
    new Vue({
        el: '#app',
        data:{

            userInfo:{"data":{"id":"","username":"未登录123","":"","name":"","phone":"","sex":"","idNumber":"","avatar":"","status":""}},

            //获取url路径id参数
            natatoriumId:'',

            imageUrl:'',
            formInfo:{},


            //图片组

            fileList: [],
            dialogImageUrl: '',
            dialogVisible: false,

            //信息填写弹框
            dialogInfo:false,
            formData_ShoppingCart:{},




            //个人信息模块(侧边栏)
            //个人信息弹框
            drawer:false,
            login:false,
            logout:false,

            activeName:'',
            //个人预定过餐桌的信息表
            myScheduleTableFrom:{},

            //我的订单div
            myOrder:false,

            //订单
            options1:[{}],

            //修改个人信息弹框
            updateInformation:false,
            formData_user:{},
            imageUrl:'',
            //弹框表单（input）校验
            rules: {
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                name: [
                    { required: true, message: '请输入姓名', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                phone: [
                    { required: true, message: '请输入手机号码', trigger: 'blur' },
                    { min: 3, max: 11, message: '长度在 3 到 11 个字符', trigger: 'blur' }
                ],
                sex: [
                    { required: true, message: '请选择性别', trigger: 'blur' },
                ],
                idNumber: [
                    { required: true, message: '请输入省份证号', trigger: 'blur' },
                    { min: 3, max:18, message: '长度在 3 到18 个字符', trigger: 'blur' }
                ],
            },
        },

        created() {
            const userInfo = window.localStorage.getItem('userInfo')
            console.log("dsdasdasdasd")
            if (userInfo!=="null") {
                if (JSON.parse(userInfo).data.username!=='未登录123'){
                    this.userInfo = JSON.parse(userInfo)
                }
            }
            console.log("userInfo22:::")
            console.log(this.userInfo)


            //获取url传过来的菜品id
            var temData = new URLSearchParams(window.location.search);
            this.natatoriumId=temData.get('id')
            console.log(temData.get('id'))

            this.getAll()
        },
       methods:{
           getAll() {
               this.fileList=[]

               axios.get("/dishs/"+this.natatoriumId).then((res) => {
                   this.formInfo=res.data.data
                   this.getImage(res.data.data.image)
                   console.log(this.formInfo)

                   //对图片组的fileList初始化
                   if (res.data.data.images!=null){
                       //2.对图片组进行字符串切割
                       var images = res.data.data.images.split(',')
                       //注：因为切割的字符串是’xxx,xxx,xxx,‘=>按逗号切割会将最后一个逗号切割成一个空字符串，所以for循环不用循环到最后一个元素
                       for (var i = 0; i < images.length-1; i++) {
                           this.fileList.push({name:images[i],url:'http://localhost:8081/photos/download?name='+images[i]})
                       }
                       console.log(this.fileList)
                   }
               })
           },

           //购物车（数据初始化）
           goShop(){
               this.dialogInfo=true
               this.formData_ShoppingCart.dishId=this.formInfo.id
               this.formData_ShoppingCart.name=this.formInfo.name
               this.formData_ShoppingCart.image=this.formInfo.image
               this.formData_ShoppingCart.price=this.formInfo.price
               this.formData_ShoppingCart.userId=this.userInfo.data.id
           },
           // 加入购物车
           addShoppingCar() {
               console.log("formData_ShoppingCart:")
               console.log(this.formData_ShoppingCart)

               axios.post("/shoppingCarts/add", this.formData_ShoppingCart).then((res) => {
                   this.$message.success(res.data.msg);
               }).finally(()=>{
                   this.getAll();
                   this.dialogInfo=false
               })
           },

           center() {
               this.dialogInfo=false;
               this.$message.info("取消操作")
               this.getAll()
           },

           //图片组图片放大
           handlePictureCardPreview(file) {
               this.dialogImageUrl = file.url;
               this.dialogVisible = true;
           },

           getImage(image) {
               this.imageUrl= `/photos/download?name=${image}`
           },


           //个人信息模块(侧边栏)
           handleClose(done) {
               this.$confirm('确认关闭？')
                   .then(_ => {
                       done();
                       this.getAll()
                   })
                   .catch(_ => {});
           },

           information(){
               this.drawer=true
               console.log(this.userInfo)
               if (this.userInfo.data.username!=="未登录123"){
                   this.login=true
                   this.logout=false
               }else {
                   this.logout=true
                   this.login=false
               }
           },
           //退出登录
           logoutInformation(){
               this.$confirm('确认退出登录嘛？')
                   .then(_ => {
                       window.localStorage.setItem('userInfo',null)
                       this.drawer=false
                       window.location.href="details2.html"
                       this.$message.success("账号已退出登录！");
                   })
                   .catch(_ => {});
           },

           //个人信息模块下的功能变化
           handleChange(){
               //修改个人信息（数据回显）
               if (this.activeName==1){
                   this.updateInformation=true
                   this.formData_user=this.userInfo.data
                   this.imageUrl= `/photos/download?name=${this.userInfo.data.avatar}`

               } else if (this.activeName==2){
                   this.myOrder=true
                   axios.get("/orders/getOrderById/"+this.userInfo.data.id).then((res)=>{
                       console.log("查询当前用户的所有订单信息（包括详情）::")
                       console.log(res.data.data)
                       this.options1=res.data.data

                   })
               }
               //查看个人预定餐桌的情况
               else if (this.activeName==4){
                   axios.get("/scheduleTables/getAllByUserId/"+this.userInfo.data.id).then((res)=>{
                       this.myScheduleTableFrom=res.data.data
                   })
               }
           },
           //取消预定餐桌
           centerSchedule(){
               this.$confirm("是否确认取消此预定，是否继续?","提醒",{type: 'info'
               }).then(()=>{

                   //删除预定表中的数据
                   axios.delete("/scheduleTables/"+this.myScheduleTableFrom.id).then((res)=>{     //1.获取删除预定信息 然后将其状态设置为0
                       this.$message.success(res.data.msg)

                       //修改餐桌表是否被预定字段
                       this.myScheduleTableFrom.isSchedule='否'
                       axios.put("/diningTables/updateTableForIsSchedule",this.myScheduleTableFrom).then((res)=>{

                       })
                   }).finally(()=>{
                       //手动让他为空，给界面展示已经取消预定还没预定餐桌的界面
                       axios.get("/scheduleTables/getAllByUserId/"+this.userInfo.data.id).then((res)=>{
                           this.myScheduleTableFrom=res.data.data
                       })
                       this.getAll()
                   })
               }).catch(()=>{
                   //取消删除
                   this.$message.info("取消操作")
               })
           },
           //确认修改个人信息
           submitForm() {
               this.$refs.formData_user.validate((valid)=>{
                   axios.put("/users",this.formData_user).then((res)=>{
                       if (res.data.code){
                           this.$message.success("修改个人信息成功！");
                           localStorage.setItem('userInfo',JSON.stringify(res.data))
                       }
                   }).finally(()=>{
                       this.getAll();
                       this.updateInformation=false;
                   })
               })
           },
           //4.图片文件上传
           handleAvatarSuccess (response, file, fileList) {
               console.log("response:")
               console.log(response)
               this.formData_user.avatar=response.data

               this.imageUrl = `/photos/download?name=${response.data}`
           },
           beforeUpload (file) {
               if(file){
                   const suffix = file.name.split('.')[1]
                   const size = file.size / 1024 / 1024 < 2
                   if(['png','jpeg','jpg'].indexOf(suffix) < 0){
                       this.$message.error('上传图片只支持 png、jpeg、jpg 格式！')
                       this.$refs.upload.clearFiles()
                       return false
                   }
                   if(!size){
                       this.$message.error('上传文件大小不能超过 2MB!')
                       return false
                   }
                   return file
               }
           },
       }
    })
</script>


</body>
</html>
